<template>
<div id="app">
  <v-app id="inspire">
    <v-data-table
      :headers="headers"
      :items="hosts"
      class="elevation-1"
    >
      <template v-slot:top>
        <v-toolbar flat color="white">
          <v-toolbar-title>Host Management</v-toolbar-title>
          <v-divider
            class="mx-4"
            inset
            vertical
          ></v-divider>
          <v-spacer></v-spacer>
          <v-dialog v-model="dialog" max-width="500px">
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                color="primary"
                dark
                class="mb-2"
                v-bind="attrs"
                v-on="on"
              >New Item</v-btn>
            </template>
            <v-card>
              <v-card-title>
                <span class="headline">{{ cardtitle }}</span>
              </v-card-title>
              <v-card-text>
                <v-container>
                  <v-row>
                    <v-col cols="12" sm="6" md="4">
                      <v-text-field v-model="editedItem.hostname" label="hostname"></v-text-field>
                    </v-col>
                    <v-col cols="12" sm="6" md="4">
                      <v-text-field v-model="editedItem.port" label="port"></v-text-field>
                    </v-col>
                    <v-col cols="12" sm="6" md="4">
                      <v-text-field v-model="editedItem.ip" label="Ip Address"></v-text-field>
                    </v-col>
                    <v-col cols="12" sm="6" md="4">
                      <v-text-field v-model="editedItem.username" label="Username"></v-text-field>
                    </v-col>
                    <v-col cols="12" sm="6" md="4">
                      <v-text-field :append-icon="password_show ? 'mdi-eye' : 'mdi-eye-off'"
                                    v-model="editedItem.password"
                                    :type="password_show ? 'text' : 'password'"
                                    label="Password"
                                    @click:append="password_show = !password_show"
                      ></v-text-field>
                    </v-col>
                  </v-row>
                </v-container>
              </v-card-text>

              <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="blue darken-1" text @click="close">Cancel</v-btn>
                <v-btn color="blue darken-1" text @click="save">Save</v-btn>
              </v-card-actions>
            </v-card>
          </v-dialog>
        </v-toolbar>
      </template>
      <template v-slot:item.actions="{ item }">
       <v-icon
          class="mr-2"
          @click="groupItem(item)"
        >
          group
        </v-icon>
        <v-icon
          class="mr-2"
          @click="editItem(item)"
        >
          mdi-pencil
        </v-icon>
        <v-icon
          class="mr-2"
          @click="deleteItem(item)"
        >
          mdi-delete
        </v-icon>
      </template>
    </v-data-table>

       <v-row justify="center">
      <v-dialog v-model="groupdialog" persistent max-width="600px">
        <v-card>
          <v-card-title>
            <span class="headline">User Profile</span>
          </v-card-title>
          <v-card-text>
            <v-container>
              <v-row>
                <v-col cols="12" sm="12">
                  <v-select
                    :items="editedGroups"
                    v-model="selectedGroups"
                    item-value="id"
                    item-text="groupname"
                    label="Group*"
                    return-object
                    multiple
                    filled
                  ></v-select>
                </v-col>
              </v-row>
            </v-container>
            <small>*indicates required field</small>
          </v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="blue darken-1" text @click="groupdialog = false">Close</v-btn>
            <v-btn color="blue darken-1" text @click="savegroupItem">Save</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </v-row>
  </v-app>
</div>
</template>


<script>
import { mapState, mapActions } from 'vuex'
export default {
  data: () => ({
    password_show : false,
    dialog: false,
    groupdialog: false,
    headers: [
      {text: 'Host Name', align: 'start', value: 'hostname'},
      {text: 'SSH Port', value: 'port'},
      {text: 'IP Address', value: 'ip'},
      {text: 'User Name', value: 'username'},
//      {text: 'Password', value: 'password'},
      {text: 'Actions', value: 'actions', sortable: false}
    ],
    editedGroups: [],
    selecteditem: {},
    selectedGroups: [],
    editedIndex: -1,
    editedItem: {
      hostname: "",
      port: "",
      ip: "",
      username: "",
      password: "",
    },
    defaultItem: {
      hostname: "",
      port: "",
      ip: "",
      username: "",
      password: "",
    },
  }),
  mounted() {
    this.GetHostInfo()
    this.GetGroupInfo()
  },
  computed: {
    ...mapState([
          "host",
          "group"
    ]),
    hosts (){
      return this.host.hosts
    },
    cardtitle () {
      return this.editedIndex === -1 ? 'New Host' : 'Edit Host'
    }
  },
  watch: {
    dialog (val) {
      val || this.close()
    },

  },
  methods: {
    ...mapActions(
      'host', ['GetHostInfo','UpdateHostGroup','CreateHost','DeleteHost']),
    ...mapActions(
      'group', ['GetGroupInfo']),
    editItem (item) {
      this.editedIndex = this.hosts.indexOf(item)
      this.editedItem = Object.assign({}, item)
      this.dialog = true
    },

    deleteItem (item) {
      const index = this.hosts.indexOf(item)
      confirm('Are you sure you want to delete this item?') && this.DeleteHost(item)
    },

    close () {
      this.dialog = false
      this.$nextTick(() => {
        this.editedItem = Object.assign({}, this.defaultItem)
        this.editedIndex = -1
      })
    },
    save () {
      if (this.editedIndex > -1) {
        this.UpdateHostGroup(this.editedItem)
      } else {
        this.CreateHost(this.editedItem)
      }
      this.close()
    },
    //Group Management
    groupItem (item) {
      this.editedIndex = this.hosts.indexOf(item)
      this.selecteditem = item
      this.editedGroups = this.group.groups
      this.selectedGroups = item.groups
//      for ( g in item.groups ) {
//          console.log(JSON.stringify(g))
//          this.groupItem.append(g.groupname )
//      }
      this.groupdialog = true
    },
    savegroupItem () {
      let groups = this.selectedGroups
      const group_list = []
      for (let i=0; i<groups.length; i++){
          group_list.push(groups[i].id)
      }
      this.selecteditem.group_list = group_list
//      console.log(JSON.stringify("selectitems: " + this.selecteditem))
      this.UpdateHostGroup(this.selecteditem)
      this.groupdialog = false
    },
  }
}

</script>